<template>
  <div style="width: 100%;height:calc(100vh - 120px);background-color:#F1F3F4;overflow: auto">
    <el-row style="height:120px;background-color: white;">
      <el-col :span="24" >
        <div>
          <span style="color: lightgray;margin-top: 5px;margin-left: 10px">{{details.processInstanceId}}</span>
        </div>
        <div style="height: 80px;text-align: center;padding-top: 20px">
          <span style="font-size: 25px;" ><strong>{{details.processName}}</strong></span>
        </div>
      </el-col>
    </el-row>

    <el-row style="height:350px;background-color: white;" >
      <el-col :span="24" >
        <el-row style="height: 30px">
          <el-col :span="1">
            <div style="width: 3px; height: 25px;background-color: red;margin-left: 50px"></div>
          </el-col>
          <el-col :span="8">
            &nbsp;&nbsp;&nbsp;<span style="font-size: 18px"><strong>基本信息</strong></span>
          </el-col>
        </el-row>
        <div style="height: 2px;background-color:#F1F3F4"></div>

        <el-row>
          <el-col :span="24" >
            <div style="width: 80%; margin-left: 10%;margin-top: 20px">
              <el-form  :label-position="labelPosition"  label-width="120px" ref="form" :model="reimburseDetail" >
                <el-form-item prop="applyUser" label="申请人">
                  <el-input size= "small" type="text"  disabled  v-model="reimburseDetail.applyUserName" style="width: 500px"></el-input>
                </el-form-item>

                <el-form-item prop="applyMoney" label="申请金额">
                  <el-input size= "small" type="number"  placeholder="请输入金额"  v-model="reimburseDetail.applyMoney" :disabled="canEdit" style="width: 500px"></el-input>
                </el-form-item>

                <el-form-item prop="applyReason" label="申请原因">
                  <el-input size= "small" type="textarea"  placeholder="请输入申请原因" rows="6"  v-model="reimburseDetail.applyReason" :disabled="canEdit" style="width: 500px"></el-input>
                </el-form-item>
              </el-form>
            </div>

          </el-col>
        </el-row>
      </el-col>
    </el-row>


  </div>
</template>

<script>

import {getUser} from '@/api/user';
import {findByProcessInstanceId,saveReimbursement} from '@/api/reimbursementProcess';
export default {
  components:{
  },
  data() {
    return {
      user:{},
      labelPosition:'left',
      workflowDetail:{},
      details:{
        processName:""
      },
      canEdit:false,
      reimburseDetail:this.defaultReimburse()
    }
  },
  created() {
    this.nowUser();
  },
  methods: {
    defaultReimburse(){
      return {
        processInstanceId:"",
        applyUser:this.user ? this.user.userAccount : '',
        applyUserName: this.user ? this.user.username : '',
        applyReason:"",
        applyMoney:"",
      }
    },
    async saveReimburseForm(refresh){
      if(this.reimburseDetail.applyMoney == null || this.reimburseDetail.applyMoney === ''){
        this.$message.error('请填写报销金额')
        return false;
      }
      if(this.reimburseDetail.applyReason == null || this.reimburseDetail.applyReason === ''){
        this.$message.error('请填写报销事由')
        return false;
      }
      this.reimburseDetail.processInstanceId = this.workflowDetail.processInstanceId;
      let ret = await saveReimbursement(this.reimburseDetail);
      if(ret.status === '200'){
        this.$message.success("保存成功");
        if(refresh){
          location.reload();
        }
        return true;
      }
      return false;
    },
    showProcess(row){
       this.workflowDetail = row;
       this.details = this.workflowDetail.details;
       if(this.user.userAccount !== this.workflowDetail.details.initAccount){
         this.canEdit = true;
       }
       this.reimburseDetail.processInstanceId = this.workflowDetail.processInstanceId;
       this.getBusinessByProcessInstanceId();
    },
    getReimburseDetail(){
      return this.reimburseDetail;
    },
    async nowUser(){
      let ret =  await getUser();
      this.user = ret.data.user;
    },
    async getBusinessByProcessInstanceId(){
      let processInstanceId = this.workflowDetail.processInstanceId;
      let ret = await findByProcessInstanceId({processInstanceId:processInstanceId});
      this.reimburseDetail = ret.data == null ? this.defaultReimburse() : ret.data;
      this.$emit("success",this.reimburseDetail);

    }
  },

}
</script>


<style lang="scss" scoped>
</style>
